// import React from "react"

// class DemoA extends React.Component {
//   // props不要去修改，只能使用，和vue一样
//   // 在react，父给子传递的任何东西都叫props。
//   // props的数据流和state的数据流不要交叉使用，必须保证两个数据流是相互独立，互不影响。
//   constructor(props) {
//     super(props);  // 这一行代码必须是第1行

//     console.log("constructor...");

//     // 在constructor中可以定义类组件中的状态
//     this.state = {
//       num: 1

//       // props的数据流和state的数据流交叉使用
//       // num: props.num
//     }

//     this.setState({
//       num: 666
//     })

//     this.add = this.add.bind(this)
//   }
//   add() {
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   render() {
//     console.log("render...");
//     let { num } = this.state;
//     return (
//       <div>
//         <h2>类组件</h2>
//         <h3>{num}</h3>
//         <button onClick={this.add}>+1</button>
//       </div>
//     )
//   }
// }

// // constructor总结：
// //   1）constructor中可以定义状态
// //   2）constructor中可以绑定方法中this
// //   3）不能调接口，不能进行DOM操作，不能开定时.... 一切和业务相关的代码都不能放在constructor中
// //   4）constructor中不能调用setState
// //   5）constructor中可以得到props，需要保证props数据流和state数据流相互独立

// export default DemoA;

// ---------------------------------------------


// import React from "react"

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       num: 1
//     }
//   }
//   add() {
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   render() {
//     console.log("render...");
//     let { num } = this.state;
//     // 这一种写法，是在render函数中直接调用setState
//     // this.setState(_ => ({ num: _.num + 1 }))
//     return (
//       <div>
//         <h2>类组件</h2>
//         <h3>{num}</h3>
//         <button onClick={() => this.add()}>+1</button>
//       </div>
//     )
//   }
// }


// export default DemoA;

// ---------------------------------------------

// import React from "react"

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       num: 1
//     }
//   }
//   add() {
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   renderHn() {
//     this.setState(_ => ({ num: _.num + 1 }))
//     return <h1>我是h1</h1>
//   }
//   render() {
//     console.log("render...");
//     let { num } = this.state;
//     return (
//       <div>
//         <h2>类组件</h2>
//         {/* 间接地调用setState */}
//         {/* <h3>{this.renderHn()}</h3> */}
//         <h3>{num}</h3>
//         <button onClick={() => this.add()}>+1</button>
//       </div>
//     )
//   }
// }


// export default DemoA;

// ---------------------------------------------


// import React from "react"

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props);
//     console.log("constructor...");
//     this.state = {
//       num: 1,
//       count: 0
//     }
//   }
//   add() {
//     // this.setState(_ => ({ num: _.num + 1 }), () => {
//     //   console.log(this.state.num + "变化了~");
//     //   // todo...
//     // })
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   componentDidMount() {
//     console.log("componentDidMount...");
//   }
//   // state 是旧值
//   componentDidUpdate(props, state) {
//     console.log("componentDidUpdate...");
//     // console.log(this.state.num + "变化了~");
//     // todo...

//     // 在componentDidUpdate中不能直接调用setState
//     // this.setState(_ => ({ num: _.num + 1 }))

//     // 去调用setState必须给一个出口，如果不给，就爆栈
//     // console.log(state.count);
//     // console.log(this.state.count);
//     // if (state.count === this.state.count) {
//     //   this.setState(state => ({ count: state.count + 1 }))
//     // }

//     // setTimeout(() => {
//     //   this.setState(state => ({ count: state.count + 1 }))
//     // }, 1)
//   }
//   render() {
//     console.log("render...");
//     let { num, count } = this.state;
//     return (
//       <div>
//         <h2>类组件:更新了{count} 次</h2>
//         <h3>{num}</h3>
//         <button onClick={() => this.add()}>+1</button>
//       </div>
//     )
//   }
// }


// export default DemoA;

// ---------------------------------------------

// import React from "react"

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props);
//     console.log("constructor...");
//     this.state = {
//       num: 1,
//       count: 0
//     }
//   }
//   add() {
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   componentDidMount() {
//     console.log("componentDidMount...");
//   }
//   componentDidUpdate(props, state) {
//     console.log("componentDidUpdate...");

//     // 在componentDidUpdate中可以监听数据的变化
//     // state是老的状态
//     // 只监听num的变化
//     if (state.num !== this.state.num) {
//       console.log("num变化了~");
//       // todo...
//     }

//     // 监听count以外的其它的其它状态变化
//     if (state.count === this.state.count) {
//       this.setState(state => ({ count: state.count + 1 }))
//       // todo...
//     }
//   }
//   render() {
//     console.log("render...");
//     let { num, count } = this.state;
//     return (
//       <div>
//         <h2>类组件:更新了{count} 次</h2>
//         <h3>{num}</h3>
//         <button onClick={() => this.add()}>+1</button>
//       </div>
//     )
//   }
// }


// export default DemoA;


// ---------------------------------------------

// import React from "react"

// class DemoA extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       num: 1,
//       flag:true
//     }
//   }
//   add() {
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   // 在组件中，可以定义很多的状态，这些状态分两类：
//   //   1）有的状态是参与页面的渲染，如：num
//   //   2）有的状态是不参与页面的渲染的，仅仅是进行一些业务运算
//   // 什么需要需要重新render，参与页面渲染的状态变化了，才去render
//   // 如果状态没有参与页面的渲染，它变化了，我们是没有必须重新render
//   // 所以我们就需要一个开关来控制是否需要render，就是shouldComponentUpdate
//   // 为什么要这样呢？
//   //    因为每一次render都会生成Fiber树，都会进入新Fiber树和老Fiber树的协调运算
//   //    这些都是需要性能消耗。 shouldComponentUpdate的目的是尽可能少的生成Fiber树
//   shouldComponentUpdate(props, state) {
//     console.log("shouldComponentUpdate...");
//     console.log(state);
//     // return false;  // 不更新

//     return true;

//     // 如果返回true，表示更新，默认情况下，不写就是返回true
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h2>类组件</h2>
//         <h3>{num}</h3>
//         <button onClick={() => this.add()}>+1</button>
//       </div>
//     )
//   }
// }


// export default DemoA;

// ---------------------------------------------

// import React from "react"

// // PureComponent 就可以达到shouldComponentUpdate的目的。
// class DemoA extends React.PureComponent {
//   constructor(props) {
//     super(props);
//     this.state = {
//       num: 1,
//       flag: true
//     }
//   }
//   add() {
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h2>类组件</h2>
//         <h3>{num}</h3>
//         <button onClick={() => this.add()}>+1</button>
//       </div>
//     )
//   }
// }


// export default DemoA;

// ---------------------------------------------

// import React, { useState } from "react";

// class Fahrenheit extends React.Component {
//   render() {
//     return (
//       <div>
//         <label>华氏温度：</label>
//         <input type="text" />
//       </div>
//     )
//   }
// }

// function Celsius(props) {
//   let { value, onChange } = props;
//   let change = (e) => {
//     // console.log(e.target.value);
//     onChange(e.target.value); // 调用父中的change方法
//   }
//   return (
//     <div>
//       <label>摄氏温度：</label>
//       <input type="text" value={value} onChange={change} />
//     </div>
//   )
// }

// function DemoA() {
//   const [temper, setTemper] = useState(0);
//   let change = (val) => {
//     setTemper(val)
//   }
//   return (
//     <div>
//       <Fahrenheit></Fahrenheit>
//       <hr />
//       {/* <Celsius value={temper} onChange={change}></Celsius> */}
//       <Celsius value={temper} onChange={val => setTemper(val)}></Celsius>
//     </div>
//   )
// }

// export default DemoA;

// ---------------------------------------------


import React, { useState } from "react";

class Fahrenheit extends React.Component {
  render() {
    const { value, onChange } = this.props;
    let change = e => {
      let temper = (Number(e.target.value) - 32) * 5 / 9;
      onChange(Number(temper))
    }
    return (
      <div>
        <label>华氏温度：</label>
        <input type="text" value={value * 9 / 5 + 32} onChange={change} />
      </div>
    )
  }
}

function Celsius(props) {
  let { value, onChange } = props;
  let change = (e) => {
    // console.log(e.target.value);
    onChange(e.target.value); // 调用父中的change方法
  }
  return (
    <div>
      <label>摄氏温度：</label>
      <input type="text" value={value} onChange={change} />
    </div>
  )
}

function DemoA() {
  const [temper, setTemper] = useState(0);
  return (
    <div>
      <Fahrenheit value={temper} onChange={val => setTemper(val)}></Fahrenheit>
      <hr />
      <Celsius value={temper} onChange={val => setTemper(val)}></Celsius>
    </div>
  )
}

export default DemoA;
